<template>
  <div class="page">
    <back-btn></back-btn>
    <div class="fixed">
      <div class="item title-bar">
        <div class="tab_bubble">
          <span class="bubble"></span>
          <div class="title">{{data.name}}</div>
        </div>
        <div v-if="fromSchool" class="item">
          <div class="desc stable">{{collegeName}}</div>
          <div class="subject">
            <span v-if="subjects.type!='0'" class="sub" :class="subjectTheme[item.id]" v-for="(item,i) in subjects.subjects" :key="i">/{{item.name}}/</span>
            <span class="badge badge-dashed" v-if="subjects.type=='0'">不限</span>
            <span v-if="subjects.type!='0'" class="badge badge-dashed chooce">{{subjects.desc}}</span>
          </div>
        </div>
        <div class="item" v-else>
          <div class="desc stable">{{data.categoryName}}
            <span v-if="data.subCategoryName">/{{data.subCategoryName}}</span>
          </div>
          <div class="stable">开设院校：{{totalCount||0}}所</div>
        </div>
      </div>
      <tab-bar :tabsData="list" :currentIndex="curIndex" @tabClick="tabSwitch" :isObject="true" ref="tabBar"></tab-bar>
    </div>
    <div class="content scroll-wrap">
      <div class="tab-content">
        <div v-show="curIndex===0" class="p-0 first">
          <div class="list list-wrap" v-show="pageType==='show'">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>推荐</h3>
            </div>
            <p class="explain bold">不限科目</p>
            <div class="recommand">
              <div @click="goSchool(noLimitSubject)" v-if="noLimitSubject.subject">
                <div class="card" :class="'bg-'+subjectTheme[noLimitSubject.subject.id]">
                  <span class="icon icon-font" :class="'icon-km'+noLimitSubject.subject.id"></span>
                  <span>{{noLimitSubject.subject.name}}</span>
                </div>
                <div :class="subjectTheme[noLimitSubject.subject.id]">/ {{noLimitSubject.num || 0}}所 /</div>
              </div>
            </div>
            <p class="explain bold" v-if="singleSubject">单科要求</p>
            <div class="recommand" v-if="singleSubject">
              <div v-for="(item,index) in singleSubject" :key="index" @click="goSchool(item)">
                <div class="card" :class="'bg-'+subjectTheme[item.subject.id]">
                  <span class="icon icon-font" :class="'icon-km'+item.subject.id"></span>
                  <span>{{item.subject.name}}</span>
                </div>
                <div :class="subjectTheme[item.subject.id]">/ {{item.num}}所 /</div>
              </div>
            </div>
            <p class="explain bold" v-if="multiSubject.length>0">组合科目要求</p>
            <div class="recommand multiRecommand" v-if="multiSubject.length>0">
              <div v-for="(item,index) in multiSubject" :key="index" @click="goSchool(item,'组合科目')">
                <div>
                  <div class="card" :class="'bg-'+subjectTheme[sItem.id]" v-for="(sItem,sIndex) in item.subject" :key="sIndex">
                    <span class="icon icon-font" :class="'icon-km'+sItem.id"></span>
                    <span :key="sIndex">{{sItem.name}}</span>
                  </div>
                </div>
                <div :class="subjectTheme[1]">/ {{item.num}}所 /</div>
              </div>
            </div>
          </div>
          <div class="list list-wrap" v-show="data.description||data.schoolingTime||data.degree">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>专业概况</h3>
            </div>
            <div class="item item-text-wrap">
              <div class="word" v-if="data.description">
                <span class="bold" style="display:inline;">培养目标：</span>
                <span class="text">{{data.description}}</span>
              </div>
              <div class="word" v-if="data.schoolingTime">
                <span class="bold">学制：</span>
                <span class="text">{{data.schoolingTime}}年</span>
              </div>
              <div class="word" v-if="data.degree">
                <span class="bold">学位授予：</span>
                <span class="text">{{data.degree}}</span>
              </div>
            </div>
          </div>
          <div class="list list-wrap" v-show="data.knowledge">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>获得知识与能力</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.knowledge}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.courses">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>核心课程</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.courses}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.employment">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3>就业情况</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.employment}}
            </div>
          </div>
        </div>
        <div v-show="curIndex===1&&!fromSchool">
          <div class="picker">
            <div v-for="(item,index) in pickerList" :key="index">
              <span>{{item.title}}</span>
              <div>
                <span v-for="(obj,i) in item.data" :key="i" :class="pickerIndex[index]===i?'badeg badge-energized':''" @click="pickerSwitch(index,i,obj.id)">{{obj.name}}</span>
              </div>
            </div>
          </div>
          <div class="list school-list" v-if="listData.length>0">
            <nuxt-link :to="{name:'xuanke-school-detail',query:{id:item.collegeId,fromPage:fromPage}}" tag="a" class="item item-card item-icon-right item-avatar-left item-stripe" v-for="(item,index) in listData" :key="index">
              <img :src="item.schoolBadge | imgResize(50,50)" />
              <div class="item-content">
                <h3>{{item.collegeName}}</h3>
                <p class="item-flex">
                  <span class="badge badge-dashed" v-if="item.type===0">不限</span>
                  <span class="badge" v-if="item.type!==0" :class="'badge-'+subjectTheme[ceil.id]" v-for="(ceil,cIndex) in item.subjects" :key="cIndex">{{ceil.name}}</span>
                  <span class="badge badge-dashed chooce" v-if="item.type!==0">{{item.desc}}</span>
                  <!-- <span class="source" v-if="item.source">{{item.source}}</span> -->
                  <span class="source" v-if="item.source">
                    <img :src="item.sourceType==='金苹果'?'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/apple.png':'https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/apple.png' | imgResize(20,20)" class="source-img" alt="">
                    <span class="yellow1">
                      {{item.sourceDesc}}
                    </span>
                  </span>
                </p>
              </div>
              <div class="button energized border-energized button-clear">
                查看详情
              </div>
            </nuxt-link>
          </div>
          <no-content v-else :text="text"></no-content>
          <paginate :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
        </div>
        <!-- 评价 -->
        <div class="list relate" v-show="curIndex===commentIndex">
          <div class="list list-wrap">
            <div class="item item-text-wrap" v-for="(item,i) in data.evaluate" :key="i">
              <p class="bold">{{item.title}}</p>
              <p class="question">{{item.content}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { subjectTheme, api } from '@/utils'
export default {
  layout: 'xuanke',
  data () {
    return {
      pageType: '',
      fromSchool: '',
      fromPage: '',
      subjectTheme,
      commentIndex: 2,
      page: 0,
      list: [
        {
          name: '简介',
          index: 0
        }, {
          name: '院校',
          index: 1
        }, {
          name: '评价',
          index: 2
        }
      ],
      curIndex: 0,
      data: {},
      pickerList: [],
      pickerIndex: [0, 0, 0, 0],
      noLimitSubject: [],
      singleSubject: [],
      multiSubject: [],
      params: {
        majorId: '',
        page: 0,
        size: 15
      },
      listData: [],
      subjects: {},
      collegeName: '',
      totalElements: 0,
      totalCount: '',
      text: '正在加载数据...'
    }
  },
  methods: {
    tabSwitch (i) {
      this.curIndex = i
    },
    pickerSwitch (index, i, id) {
      this.pickerIndex.splice(index, 1, i)
      let rel = this.pickerList[index].data[i]
      this.params[rel.type] = rel.id
      this.params.page = 0
      // this.page = this.params.page + 1
      this.$set(this, 'page', this.params.page + 1)
      this.getData(this.params)
    },
    goSchool (item, type) {
      this.$refs['tabBar'].tabClick(1)
      if (type === '组合科目') {
        let provinces = this.$store.state.userInfo.province.id
        if (provinces === 330000) {
          this.pickerIndex[2] = 9
        } else {
          this.pickerIndex[2] = 8
        }
        this.$set(this.params, 'subjectId', 1)
      } else {
        switch (item.subject.name) {
          case '不限':
            this.pickerIndex[2] = 1
            this.$set(this.params, 'subjectId', 0)
            break
          case '物理':
            this.pickerIndex[2] = 2
            this.$set(this.params, 'subjectId', 1001)
            break
          case '化学':
            this.pickerIndex[2] = 3
            this.$set(this.params, 'subjectId', 1002)
            break
          case '地理':
            this.pickerIndex[2] = 4
            this.$set(this.params, 'subjectId', 1003)
            break
          case '生物':
            this.pickerIndex[2] = 5
            this.$set(this.params, 'subjectId', 1004)
            break
          case '政治':
            this.pickerIndex[2] = 6
            this.$set(this.params, 'subjectId', 1005)
            break
          case '历史':
            this.pickerIndex[2] = 7
            this.$set(this.params, 'subjectId', 1006)
            break
          default:
            this.pickerIndex[2] = 0
            this.$set(this.params, 'subjectId', '')
        }
      }
      this.getData(this.params)
    },
    getData (params) {
      let link, getTotal
      // 如果是从按科目选专业跳过来的就调用此接口
      if (this.$store.state.chooceSubject) {
        link = api.queryCollegeBySubjectMajor
        params.subjectIdList = this.$store.state.chooceSubject
        getTotal = !params.collegeLevelId && !params.collegeTypeId && !params.provinceId
      } else {
        link = api.queryDynamicCollegeMajor
        getTotal = !params.collegeLevelId && !params.collegeTypeId && !params.provinceId && !params.subjectId
      }
      this.$axios.get(link, { params: params }).then(data => {
        if (data.content.length > 0) {
          data.content.forEach(item => {
            item.desc = (item.type !== 0) ? `${parseInt(item.type / 10)}选${item.type % 10}` : ''
            if (item.source) {
              item.sourceType = item.source.substring(0, item.source.indexOf('排'))
              item.sourceDesc = item.source.substring(item.source.indexOf('排'), item.source.length)
            }
          })
          this.listData = data.content
          this.totalElements = data.totalElements
          if (getTotal) {
            this.totalCount = data.totalElements
          }
        } else {
          this.listData = []
          this.totalElements = 0
        }
        this.text = this.listData.length ? '' : '暂无数据'
      })
    },
    // 分页
    pagechange (currentPage) {
      console.log(currentPage)
      this.params.page = currentPage - 1
      this.page = currentPage
      this.getData(this.params)
    }
  },
  beforeMount () {
    this.page = this.params.page + 1
    this.curIndex = 0
    this.params.majorId = this.$route.query.id
    this.pageType = this.$route.query.pageType
    this.fromSchool = this.$route.query.fromSchool
    this.fromPage = this.$route.query.fromPage
    if (this.fromSchool) {
      this.collegeName = this.$route.query.collegeName
      this.subjects = JSON.parse(this.$route.query.subjects)
    }
    this.$axios.get(api.queryMajor, { params: { id: this.params.majorId } }).then(data => {
      let isEvaluate = false
      if (data.evaluate) {
        isEvaluate = true
        data.evaluate = JSON.parse(data.evaluate)
      }
      if (this.fromSchool && isEvaluate) {
        this.list = [
          {
            name: '简介',
            index: 0
          }, {
            name: '评价',
            index: 1
          }
        ]
        this.commentIndex = 1
      }
      if (this.fromSchool && !isEvaluate) {
        this.list = [
          {
            name: '简介',
            index: 0
          }
        ]
      }
      if (!this.fromSchool && isEvaluate) {
        this.list = [
          {
            name: '简介',
            index: 0
          }, {
            name: '院校',
            index: 1
          }, {
            name: '评价',
            index: 2
          }
        ]
      }
      if (!this.fromSchool && !isEvaluate) {
        this.list = [
          {
            name: '简介',
            index: 0
          }, {
            name: '院校',
            index: 1
          }
        ]
      }
      this.data = data
    })
    this.$axios.get(api.queryCollegeCondition).then(data => {
      for (let x in data) {
        let obj = {}
        data[x].forEach((item, index) => {
          if (item.id === undefined || item.id === null) {
            item.id = ''
          }
          switch (x) {
            case 'provinces':
              item.type = 'provinceId'
              obj.title = '学校地区'
              obj.data = data[x]
              break
            case 'collegeLevels':
              item.type = 'collegeLevelId'
              obj.title = '学校类型'
              obj.data = data[x]
              break
            case 'collegeTypes':
              item.type = 'collegeTypeId'
              obj.title = '学校性质'
              obj.data = data[x]
              break
            case 'subjects':
              item.type = 'subjectId'
              obj.title = '学校要求'
              obj.data = data[x]
              break
          }
          if (index === 0) {
            this.params[item.type] = item.id
          }
        })
        if (obj.title === '学校要求') {
          obj.data.push({
            id: 1,
            isSpecial: false,
            name: '组合科目',
            type: 'subjectId'
          })
        }
        this.pickerList.push(obj)
      }
      if (this.pageType === 'hide') {
        this.pickerList.splice(2, 1)
      }
    })
    this.getData(this.params)
    if (this.pageType === 'show') {
      this.$axios.get(api.getRecommendSubject, { params: { majorId: this.params.majorId } }).then(data => {
        // this.recommendSubject = data
        let { noLimit, single, multi } = data
        if (noLimit || single || multi) {
          this.noLimitSubject = { subject: { id: 0, name: '不限', isSpecial: false }, num: noLimit }
          this.singleSubject = single
          this.multiSubject = multi
          // console.log(this.multiSubject)
        } else {
          this.noLimitSubject = { subject: { id: 0, name: '不限', isSpecial: false }, num: 0 }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .title-bar {
    border-bottom: 1px solid $stable-ec;
    padding: 10px 25px;
    align-items: flex-end;
    .tab_bubble {
      margin-right: 10px;
      margin-bottom: 0px !important;
    }
    > div:last-child {
      justify-content: space-between;
      flex: 1;
    }
    .sub {
      margin-right: 5px;
    }
    .chooce {
      margin-left: 10px;
    }
  }
  .content {
    position: relative;
    flex: 1;
    // overflow-y: auto;
    .school-list {
      margin-top: 25px;
      .item {
        &-stripe {
          margin: 0 -20px;
        }
        h3 {
          margin-bottom: 8px;
        }
      }
      .badge {
        margin-right: 5px;
        &.chooce {
          margin-left: 5px;
        }
      }
      .source {
        font-size: 15px;
        color: $dark-energized;
      }
    }
  }
}
.p-0 {
  .list {
    margin-bottom: 15px;
    .item {
      padding: 0;
    }
  }
}
.explain {
  margin: 10px 0;
}
.recommand {
  display: flex;
  // width: 60%;
  // justify-content: space-between;
  align-items: center;
  margin: 0 0 20px 0;
  > div:not(:last-child) {
    margin-right: 50px;
  }
  &.multiRecommand {
    // justify-content: flex-start;
    > div {
      align-items: center;
      > div {
        display: flex;
        > div:not(:last-child) {
          margin-right: 5px;
        }
      }
    }
  }
  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    .card {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 42px;
      height: 68px;
      margin-bottom: 5px;
      color: $light;
      border-radius: 3px;
      .icon {
        font-size: 22px;
      }
      &.border-card {
        flex-direction: row;
        min-width: 42px;
        width: auto;
        padding: 0 10px;
      }
    }
  }
}
.question {
  margin-top: 10px;
}
.relate {
  .item {
    padding: 12px 0;
  }
}
.item-flex {
  display: flex;
  align-items: center;
}
.source {
  font-size: 15px;
  color: $stable;
  display: flex;
  align-items: center;
  > .source-img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}
</style>
